<script setup name="App">
import { useDark, useToggle, useWebSocket } from '@vueuse/core'
import { useAppStore } from '@/store/modules/app'
import { useWebSocketStore } from '@/store/modules/socket';
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';

import { nextTick } from 'vue';

const locale = ref(zhCN);
const isDark = useDark({
  selector: 'body',
  attribute: 'arco-theme',
  valueDark: 'dark',
  valueLight: null,
})

const { status, data, send, open, close, ws } = useWebSocket('ws://127.0.0.1:8888?userId=1',{
  immediate: false,
  heartbeat: {
    message: 'ping',
    interval: 10000,
    pongTimeout: 3600*1000,
  },
  autoReconnect: false,
});

const connection = () => {
  //open();
  webSocketStore.setWs(ws.value)
  webSocketStore.setStatus(status.value)
  webSocketStore.setData(data.value)
}

const appStore = useAppStore();

const webSocketStore = useWebSocketStore();

const dark = computed(() => appStore.dark)

const toggleDark = useToggle(isDark)

connection();

watch(() => dark.value, (newVal, oldVal) => {
  toggleDark();
})

watch(() => ws.value, (newWs) => {
  webSocketStore.setWs(newWs)
})

watch(() => status.value, (newStatus) => {
  webSocketStore.setStatus(newStatus)
})

watch(() => data.value, (newData) => {
  webSocketStore.setData(newData)
})

</script>
<template>
  <a-config-provider :locale="locale">
    <router-view />
  </a-config-provider>
</template>
<style>
</style>